<template>
    <div class="login">
        <div class="loginBox">
            <div class="loginTip">
                <h1>{{ $t("系统登录") }}</h1>
                <el-dropdown class="headerRightDropdown" @command="handleClick">
                    <img src="@/assets/images/ce.png" style="width: 18px" alt="" srcset="" />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="zh" :disabled="store.system.language === 'zh'">中文</el-dropdown-item>
                            <el-dropdown-item command="en" :disabled="store.system.language === 'en'">English</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <sx-form class="loginForm" :formItem="formItem" :data="formData" size="large"></sx-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useStore } from "@/stores";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { login } from "@/api/user";
import { Md5 } from "ts-md5";
const store = useStore();
const { locale, t } = useI18n();
const router = useRouter();
const formData = reactive({
    username: "",
    password: "",
});
// 表单配置
const formItem = [
    {
        prop: "username",
        type: "input",
        placeholder: "请输入账号",
        icon: "User",
        iconPosition: "left",
        rules: [
            {
                required: true,
                message: t("请输入账号"),
                trigger: "blur",
            },
        ],
    },
    {
        prop: "password",
        type: "input",
        placeholder: "请输入密码",
        icon: "Unlock",
        iconPosition: "left",
        isPwd: true,
        rules: [
            {
                required: true,
                message: t("请输入密码"),
                trigger: "blur",
            },
        ],
        isKeyup: true,
    },
    {
        type: "buttons",
        width: "100%",
        children: [
            {
                type: "primary",
                value: "登录",
                width: "100%",
                subMit: true,
                click: async (form: any) => {
                    try {
                        const md5: any = new Md5();
                        md5.appendAsciiStr(form.password);
                        const password = md5.end();
                        const res: any = await login({
                            principal: form.username,
                            credentials: password,
                            sysType: 0,
                        });
                        if (res.success) {
                            store.user.token = res.data.accessToken;
                            router.replace("/base");
                        }
                    } catch (error) {
                        console.log(error);
                    }
                },
            },
        ],
    },
];
// 切换语言
const handleClick = (command: string | number | object) => {
    switch (command) {
        case "zh":
            (locale as any).value = "zh";
            store.system.language = "zh";
            break;
        case "en":
            (locale as any).value = "en";
            store.system.language = "en";
            break;
        default:
            break;
    }
};
</script>
